<template>
    <div :key="key">
        <el-table :data="requstData" style="width: 100%">
            <el-table-column prop="batch" label="批次号" width="180" />
            <el-table-column prop="editValidityDate" label="数据编辑窗口期" width="180" >
                <template #default="scope">
                    {{ scope.row.editValidityDate }}天
                </template>
            </el-table-column>
            <el-table-column prop="archivingDate" label="数据归档日期" >
                <template #default="scope">
                    每月{{ scope.row.archivingDate }}号
                </template>
            </el-table-column>
            <el-table-column prop="appealDate" label="数据申诉期" >
                <template #default="scope">
                    {{ scope.row.appealDate }}天
                </template>
            </el-table-column>
            <el-table-column prop="solidificationDate" label="数据固化期" >
                <template #default="scope">
                    每月{{ scope.row.solidificationDate }}号
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template #default="scope">
                    <el-link :underline="false" type="primary" @click="() => getRow(scope)">修改</el-link>
                </template>
            </el-table-column>
        </el-table>
        <el-row justify="end" style="margin: 10px 0;">
            <el-col :span="12">
                <el-pagination
                    v-if="current*pagesize<pageTotal"
                    v-model:current-page="current"
                    v-model:page-size="pagesize"
                    :page-sizes="[10, 15, 20, 35, 50, 100, 200, 300]"
                    layout="total, sizes, prev, pager, next, jumper"
                    small
                    :total="pageTotal"
                    @size-change="()=>handleSizeChange"
                    @current-change="()=>handleCurrentChange"
                    />
            </el-col>
        </el-row>
    </div>
    <!-- 修改弹窗 -->
    <el-dialog  v-model="dialogVisible" title="修改" width="50%">
        <h3>批次号：{{ editBeforeData.batch }}</h3>
        <el-divider />
        <div :key="dialogKey">
            <div v-for="(item, index) in list" :key="index">
            <el-row>
                <el-col :span="24">
                    {{ item.title }}
                </el-col>
            </el-row>
            <el-row justify="space-between">
                <el-col :span="6">
                    <div v-if="item.type == 1">
                        当前期限: {{ editBeforeData[item.prop] }}天
                    </div>
                    <div v-else>
                        当前期限: 每月{{ editBeforeData[item.prop] }}号
                    </div>
                </el-col>
                <el-col :span="1">
                    <el-popover :visible="item.visible" placement="right" :width="250" trigger="click">
                        <template #reference>
                            <el-link :underline="false" type="primary" @click="() => openEdit(item)">修改</el-link>
                        </template>
                        <div>修改期限</div>
                        <el-divider />
                        <el-input type="text" v-model.number="deitAfterVal"
                            :placeholder="item.type == 1 ? '请输入期限（1-30天）' : '请输入日期（1-28号）'" />
                        <div style="text-align: right; margin-top: 10px">
                            <el-button size="small" text @click="item.visible = false">取消</el-button>
                            <el-button size="small" type="primary" @click="editDay(item.prop)">确定</el-button>
                        </div>
                    </el-popover>
                </el-col>
            </el-row>
            <el-divider />
        </div>
        </div>
        
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="confiremEdit">
                    确认
                </el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import apiMod from '@/apiMod'

let current = ref(1)
let pagesize = ref(10)
let pageTotal = ref(0)
let dialogVisible = ref(false)
let key = ref(1)
let dialogKey = ref(1)
let requstData = reactive([])
let deitProp = ref('')
let obj = reactive({})
let editBeforeData = reactive({
    batch:''
})

let list = ref([
    {
        title: "数据编辑窗口期：数据首次入库一段时间内，数据提交人可以任意编辑数据，而不需要进行数据变更流程",
        visible: false,
        prop: 'editValidityDate',
        type: 1
    },
    {
        title: "数据归档日期：基础数据每月定期归档",
        visible: false,
        prop: 'archivingDate',
        type: 2
    },
    {
        title: "数据申诉期：数据入库遇到异常数据，可以在一段时间内提交申诉，过期不再受理",
        visible: false,
        prop: 'appealDate',
        type: 1
    },
    {
        title: "数据固化期：统计数据，每月固化一次留存，便于查阅历史情况",
        visible: false,
        prop: 'solidificationDate',
        type: 2
    },
])
// 修改字段
let editDay = (prop) =>{
    if((prop == 'editValidityDate' || prop == 'appealDate')&&(obj[prop]>0&&obj[prop]<=30)){
        editBeforeData[prop] = obj[prop]
        dialogKey.value = Math.random()
        copyItem.visible = false
    }else{
        console.log('数值范围不对')
    }
    if((prop == 'archivingDate' || prop == 'solidificationDate')&&(obj[prop]>0&&obj[prop]<=28)){
        editBeforeData[prop] = obj[prop]
        dialogKey.value = Math.random()
        copyItem.visible = false
    }else{
        console.log('数值范围不对')
    }
    
}
// 换页
const handleSizeChange = (val) =>{
    pagesize.value = val
}
// 换数据长度
const handleCurrentChange = (val) =>{
    current.value = val
}
let deitAfterVal = ref(null)
// 打开修改
let copyItem = reactive({
    visible:false // 设置此值是为了防止报错
})

//  获取当前行
const getRow = (scope) => {
    dialogVisible.value = true
    editBeforeData = JSON.parse(JSON.stringify(scope.row))
    obj = JSON.parse(JSON.stringify(scope.row))
}

const openEdit = (item) => {
    item.visible = true
    copyItem = item
    deitProp.value = item.prop
    deitAfterVal.value = obj[item.prop]

}
// 监听形成新对象
watch(deitAfterVal, (val) => {
    obj[deitProp.value] = val
})

// 确认修改时间
let confiremEdit = () => {
    let data = {
        ...obj,
        createTime: undefined,
        createUserId: undefined,
        createUserName: undefined,
        delFlag: undefined,
        isEffective: 0,
        updateTime: undefined,
        updateUserId: undefined,
        updateUserName: undefined
    }
    apiMod.dataManagementSettings_edit(data).then(res => {
        getAllData()
        dialogVisible.value = false
    })
}

// 获取所有数据
let getAllData = () => {
    let params = {
        pageParaPO: {
            current: current.value,
            size: pagesize.value
        }
    }
    apiMod.dataManagementSettings_page(params).then(res => {
        requstData = res.data.records
        pageTotal.value = res.data.total
        // 得确定展开的是哪个
        key.value = Math.random()
    })
}
onMounted(() => {
    getAllData()
})

</script>
<style scoped lang="scss"></style>